import React, { useEffect, useState } from 'react'
import './App.css'

import Footer from './components/Footer'
import Header from './components/Header'
import List from './components/List'


export default function App() {
  // 状态提升，把数据放在App中
  // 初始化todoList数据
  const [todoList,setTodoList]=useState([])

  //刚渲染App的时候,去本地存储中查看是否保存有数据

  useEffect(()=>{
    setTodoList(JSON.parse(localStorage.getItem('todoList'))|| [])
  },[])

  //监听todoList 如果发生改变,则在本地中保存
  useEffect(()=>{
    localStorage.setItem('todoList',JSON.stringify(todoList))
  },[todoList])
  return (
    <div className='todo-container'>
      <div className='todo-wrap'>
        <Header setTodoList={setTodoList} todoList={todoList}/>
        <List todoList={todoList} setTodoList={setTodoList}/>
        <Footer todoList={todoList} setTodoList={setTodoList}/>
      </div>
    </div>
  )
}
